import React from 'react'
import { Form,Button,Input,Card,Checkbox,Icon } from 'antd'
import { connect } from 'react-redux'
import { actionCreators } from './store'

import './index.less'
import Cookies from "js-cookie";
import axios from "../../axios/axios";

class Login extends React.Component{

    loginReq=(params)=>{
        console.log('执行')
        axios.ajax({
            url:'/cloud-long-upms/sysUser/login',
            method:'get',
            data:{
                params:params
            }
        }).then((res)=>{
            Cookies.set('name',res.data.name)
            Cookies.set('token',res.data.token)

            axios.ajax({
                url:'/cloud-long-upms/sysUser/loadByUserName',
                method:"get",
                data:{
                    params:{
                        token:res.data.token
                    }
                }
            }).then((res)=>{
                Cookies.set('user',res.data)
                this.props.history.push('/')
            })


        })
    }

    componentDidMount(){
        console.log('login:')
        console.log(this.props.history)
    }

    render(){


        return(
            <div className="login-page">
                <div className="login-header"></div>
                <div className="login-content-wrap">
                    <div className="login-content" style={{width:350}}>
                        {/*<div className="word">登录</div>*/}
                        <div className="login-box">
                            <Card>
                                {/*<LoginForm   loginSubmit={this.loginReq} _thisParent={this}/>*/}
                                <LoginForm   loginReq={this.loginReq}/>
                            </Card>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

class LoginForm extends React.Component{
    loginSubmit=(e)=>{
        e && e.preventDefault()
        const _this = this

        console.log('xxxxxx')
        this.props.form.validateFields((err,values)=>{
            if (!err){
                let fieldsValue=_this.props.form.getFieldsValue()
                _this.props.loginReq({
                    name:fieldsValue.name,
                    password:fieldsValue.password
                })
            }
        })

    }
    render(){
        const { getFieldDecorator } = this.props.form
        return(
            <Form>
                <Form.Item>
                    {
                        getFieldDecorator('name',{
                            initialValue:'',
                            rules:[{
                                pattern:/^[a-zA-Z0-9_-]{4,16}$/,
                                message:'用户必需为英文字母或数字下划线-!'
                            }]
                        })(
                            <Input prefix={<Icon type="user"/>} placeholder="请输入用户名"/>
                        )
                    }
                </Form.Item>
                <Form.Item>
                    {
                        getFieldDecorator('password',{
                            initialValue:'',
                            rules:[{
                                min:5,max:36,
                                message:'长度不在范围内!'
                            }]
                        })(
                            <Input type="password" prefix={<Icon type="lock"/>} placeholder="请输入密码"/>
                        )
                    }
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                    })(
                        <Checkbox>记住我</Checkbox>
                    )}
                    <a href="" style={{float:'right'}}>忘记密码</a>
                </Form.Item>
                <Form.Item>
                    <Button type="primary"
                            // onClick={()=> this.props._thisParent.props.login(this.props.form.getFieldsValue().username,this.props.form.getFieldsValue().password)}>登录</Button>
                            onClick={this.loginSubmit}>登录</Button>
                </Form.Item>
            </Form>
        )
    }
}

LoginForm=Form.create({})(LoginForm)

const mapState=(state) => ({
    token:state.getIn(['login', 'token'])
})

const mapDispatch=(dispatch) => ({
    login(username,password){
        console.log("login方法执行"+username+password)
        dispatch(actionCreators.login(username,password))
        console.log('dispatch:')
        console.log(this)
        // this.props.history.push('/')

        this.history.push('/')


    }
})

export default connect(mapState,mapDispatch)(Login)